<template>
  <div>
    <Form layout="inline" :model="formState">
      <FormItem label="企业">
        <Select
          v-model:value="formState.tenantId"
          :options="tenantOpt"
          style="width: 200px"
          placeholder="请选择"
        ></Select>
      </FormItem>
      <FormItem label="应用" name="appId">
        <Select v-model:value="formState.appId" :options="appOpt" style="width: 200px" placeholder="请选择"></Select>
      </FormItem>
      <div>
        <Tooltip title="查询">
          <Button type="primary" @click="search" shape="circle"
            ><template #icon><SearchOutlined /></template
          ></Button>
        </Tooltip>
        <Tooltip title="重置">
          <Button style="margin-left: 10px" @click="reset" shape="circle"
            ><template #icon><ReloadOutlined /></template
          ></Button>
        </Tooltip>
      </div>
    </Form>
  </div>
</template>
<script lang="ts" setup>
import { Tooltip, Form, FormItem, Select, Button } from 'ant-design-vue';
import { SearchOutlined, ReloadOutlined } from '@ant-design/icons-vue';
import { ref } from 'vue';
import { getAlias, getBusinessAppOpt } from '/@/api/tenant-mgmt/enterpriseAppAuth/enterpriseAppAuth';
const formState = ref({
  tenantId: undefined,
  appId: undefined,
  status: undefined,
});
const appOpt = ref();
const tenantOpt = ref();

const getOptions = async () => {
  appOpt.value = await getBusinessAppOpt();
  tenantOpt.value = await getAlias();
};
getOptions();

const emit = defineEmits(['get']);
const search = () => {
  emit('get', formState.value);
};

const reset = () => {
  formState.value = {
    tenantId: undefined,
    appId: undefined,
    status: undefined,
  };
  emit('get', formState.value);
};
</script>
